<template>
	<div class="yst-login">
		<div class="yst-login-header">
		</div>
		<div class="login-wrap">
			<el-form label-position="left" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="demo-ruleForm login-container">
				<h3 class="title">用户登录</h3>
				<el-form-item prop="account">
					<el-input type="text" v-model="ruleForm.account" auto-complete="off" placeholder="账号"></el-input>
				</el-form-item>
				<el-form-item prop="loginPass">
					<el-input type="password" v-model="ruleForm.loginPass" auto-complete="off" placeholder="密码"></el-input>
				</el-form-item>
				<el-row>
					<el-col :span="12">
						<el-form-item prop="code">
							<el-input type="text" v-model="ruleForm.code" auto-complete="off" placeholder="图形验证码" @keyup.enter.native="submitForm('ruleForm')"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12" class="code-box">
						<el-button class="im-bu" style="padding: 0; width: 120px; height: 33;" @click="getVerify()">
							<img :src="ruleForm.codeimg" alt="更换验证码" class="codeimg" height="33" width="100%">
						</el-button>
					</el-col>
				</el-row>
				<el-checkbox class="remember" v-model="rememberpwd">记住密码</el-checkbox>
				<el-button class="x-link" type="text" @click.native.prevent="getpass()">找回密码</el-button>
				<el-form-item style="width:100%;">
					<el-button  style="width:100%;" @click="submitForm('ruleForm')" :loading="logining">登录</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div class="xy-login-footer">
			<p>©2018-2019 新疆云闪通网络科技有限公司</p>
		</div>
	</div>
</template>
<script>
	import { login } from "@/api/user.js";
	export default {
		name: 'login',
		data() {
			return {
				//定义loading默认为false
				logining: false,
				// 记住密码
				rememberpwd: true,
				ruleForm: {
					//username和password默认为空
					username: '',
					loginPass: '',
					code: '',
					randomStr: '',
					codeimg: ''
				},
				//rules前端验证
				rules: {
					username: [{
						required: true,
						message: '请输入账号',
						trigger: 'blur'
					}],
					loginPass: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}],
					code: [{
						required: true,
						message: '请输入验证码',
						trigger: 'blur'
					}]
				}
			}
		},
		// 创建完毕状态(里面是操作)
		created() {
			// this.$notify.warning({
			// 	title: '提示',
			// 	message: "请准确输入用户名和密码",
			// 	offset: 50
			// });
			console.log("登录页面创建");
			this.getVerify();
		},
		methods: {
			getpass(){
				this.$router.push({
					path: '/getpass/getpass'
				})
			},
			submitForm(formName) {
				var that = this;
				that.$refs[formName].validate(valid => {
					if (valid) {
                        that.logining = true
                        login({
                            account: that.ruleForm.account,
                            code: that.ruleForm.code,
                            codeimg: that.ruleForm.codeimg,
                            loginPass: that.ruleForm.loginPass,
                            randomStr: that.ruleForm.randomStr,
                            username: that.ruleForm.username
                        },that.ruleForm.code).then(
                            res => {
                                console.log("res", res);
                                this.ruleForm.loginPass = this.$md5(this.ruleForm.loginPass);
                                if(res.code == 200){
                                    if (that.rememberpwd) {
                                        that.$cookies.set("pwd", that.ruleForm.loginPass);
                                    } else {
                                        that.$cookies.remove('pwd');
                                    }
                                    setTimeout(() => {
                                        that.logining = false;
                                        // 缓存用户个人信息
                                        that.$cookies.set("nzUser", true, 60*60*60);
                                        window.localStorage.setItem('menus', JSON.stringify(res.menus));
                                        window.localStorage.setItem('user', JSON.stringify(res.user));
                                        window.localStorage.setItem('token', res.token);
                                        this.$store.state.activeIndex = '/index/home';
                                        // that.$router.push({
                                        //     path: "/home"
										// });
										console.log("this.$router", this.$router);
										this.$emit("login", this.$router.currentRoute.query.from);
                                        that.getVerify();
                                    }, 1500);
                                } else {
                                    that.$message({
                                        message: res.data.msg,
                                        type: 'error'
                                    });
                                    that.logining = false;
                                    that.getVerify();
                                    return false
                                }
                            }, 
                            err => {
								this.$message({
									type: "error",
									message: err.msg
								});
                        	});
					} else {
						// 获取图形验证码
						// that.$message.error('请输入用户名密码！')
						// that.logining = false;
						return false;
					}
				})
			},
			getVerify() {
				//  后面加随机数的理由就是，每次请求都不一样的时候，才能数据更新
				this.ruleForm.codeimg = "https://api.xynph.com/user/verify?random="+ Math.random();
			}
		}
	}
</script>

<style scoped>
	.yst-login{
		height: 100%;
	}
	.login-wrap {
		box-sizing: border-box;
		width: 100%;
		height: 85%;
		padding-top: 10%;
		padding-left: 50%;
		background-image: url("../assets/img/back.jpg");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		-moz-background-size: 100% 100%;
	}
	.x-link{
		color: #16AAD8;
		float: right;
		padding: 0;
	}

	.login-container {
		border-radius: 10px;
		margin: 0px auto;
		width: 300px;
		padding: 30px 35px 15px 35px;
		background: #fff;
		border: 1px solid #eaeaea;
		text-align: left;
		box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
	}

	.title {
		margin: 0px auto 40px auto;
		text-align: center;
		color: #505458;
	}

	.remember {
		margin: 0px 0px 35px 0px;
	}

	.code-box {
		text-align: right;
	}

	.codeimg {
		height: 36px;
	}
	.yst-login-header{
		height: 60px;
		background: white;
	}
	.xy-login-footer{
		text-align: center;
		height: 30px;
		font-size: 18px;
	}
</style>
